<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/2/14
  Time: 21:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>details1</title>
    <link href="css/project.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="details1">
        <div id="title">智能交通信号灯</div>
        <div id="buttons">
            <a href="details1.jsp"><button id="button1">part1</button></a>
            <a href="details2.jsp"><button id="button2">part2</button></a>
            <a href="details3.jsp"><button id="button3">part3</button></a>
        </div>
        <div id="information" style="color: white">
            XX大道 2022/2/21 19:00 车流高峰
        </div>

        <div id="table1">
            <table align="left" border="1" width="550" height="390" cellspacing="0">
                <tr>
                    <th align="center" width="125" height="50">车牌</th>
                    <th align="center" width="125" height="50">方向</th>
                    <th align="center" width="125" height="50">车速</th>
                    <th align="center" width="125" height="50">经停时长</th>
                    <th align="center" width="125" height="50">是否违规</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
                <tr>
                    <td align="center" width="145" height="30">川EJK415</td>
                    <td align="center" width="145" height="30">南北</td>
                    <td align="center" width="145" height="30">30KM/H</td>
                    <td align="center" width="145" height="30">30S</td>
                    <td align="center" width="145" height="30">否</th>
                </tr>
            </table>
        </div>
        <div id="table2">
            <canvas id="a_canvas" width="400" height="200"></canvas>
        </div>
        <div id="table1Title"><h4>道路车辆经停记录</h4></div>

        <div id="image1">
            <a href="rgfw.jsp"><img src="css/img/rgfw.png" width="40px" ></a>
        </div>
        <div id="image2">
            <a href="live.jsp"><img src="css/img/return.png" width="40px" ></a>
        </div>
    </div>
</body>

<script>
    (function (){

        window.addEventListener("load", function(){

            var data = [23,21,19,21,27,31,29];
            var xinforma = ['1.1','1.2','1.3','1.4','1.5','1.6','1.7'];

            // 获取上下文
            var a_canvas = document.getElementById('a_canvas');
            var context = a_canvas.getContext("2d");


            // 绘制背景
            var gradient = context.createLinearGradient(0,0,0,300);


            // gradient.addColorStop(0,"#e0e0e0");
            //gradient.addColorStop(1,"#ffffff");


            context.fillStyle = gradient;

            context.fillRect(0,0,a_canvas.width,a_canvas.height);

            var realheight = a_canvas.height-15;
            var realwidth = a_canvas.width-40;
            // 描绘边框
            var grid_cols = data.length + 1;
            var grid_rows = 4;
            var cell_height = realheight / grid_rows;
            var cell_width = realwidth / grid_cols;
            context.lineWidth = 1;
            context.strokeStyle = "#a0a0a0";

            // 结束边框描绘
            context.beginPath();
            // 准备画横线
            /*for(var row = 1; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
            }*/

            //划横线
            context.moveTo(0,realheight);
            context.lineTo(realwidth,realheight);


            //画竖线
            context.moveTo(0,20);
            context.lineTo(0,realheight);
            context.lineWidth = 1;
            context.strokeStyle = "black";
            context.stroke();


            var max_v =0;

            for(var i = 0; i<data.length; i++){
                if (data[i] > max_v) { max_v =data[i]};
            }
            max_v = max_v * 1.1;
            // 将数据换算为坐标
            var points = [];
            for( var i=0; i < data.length; i++){
                var v= data[i];
                var px = cell_width *　(i +1);
                var py = realheight - realheight*(v / max_v);
                //alert(py);
                points.push({"x":px,"y":py});
            }

            //绘制坐标图形
            for(var i in points){
                var p = points[i];
                context.beginPath();
                context.fillStyle="#0F2B51";
                context.fillRect(p.x,p.y,15,realheight-p.y);

                context.fill();
            }
            //添加文字
            for(var i in points)
            {  var p = points[i];
                context.beginPath();
                context.fillStyle="black";
                context.fillText(data[i], p.x + 1, p.y - 15);
                context.fillText(xinforma[i],p.x + 1,realheight+12);
                context.fillText('单向车流',realwidth,realheight+12);
                context.fillText('日期',0,10);
            }
        },false);
    })();
</script>

</html>




